<template>
    <el-tabs v-model="editableTabsValue"
    type="border-card"
    closable
    class="demo-tabs"
    @tab-remove="removeTab"
    tab-position="left" style="height: 90%">
        <el-tab-pane class="content"
            v-for="item in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
            >
             
            <div class="sharedcontent">
                {{ item.content }}
            </div>
        </el-tab-pane>
        <el-tab-pane name="0" closable=false>
            <template #label>
                <el-button type="primary" @click="addTab(editableTabsValue)" :icon="Plus" />
            </template>

        </el-tab-pane>

        <div class="stable">
            <el-input
            v-model="textarea2"
            maxlength="100"
            show-word-limit
            placeholder="Please input"
            :rows="3"
            type="textarea"        
            />
            <el-button
                type="primary"
                style="float: right; margin-top: 5px"
                >发送</el-button
                >
        </div>     
   </el-tabs>




</template>

<script lang="ts" setup>
import { PictureRounded,Service, Star, Plus, Select}from '@element-plus/icons-vue'
import useUserInfoStore from "@/stores/userInfo.js";
const userInfoStore = useUserInfoStore();
import { ref, onMounted, onBeforeMount } from 'vue';
const avasrc = ref(userInfoStore.userInfo.avatar)
import type { TabPaneName } from 'element-plus'
const textarea2 = ref('')
let tabIndex = 2
const editableTabsValue = ref('2')
const editableTabs = ref([
  {
    title: 'Tab 1',
    name: '1',
    content: 'Tab 1 content',
  },
  {
    title: 'Tab 2',
    name: '2',
    content: 'Tab 2 content is so good',
  },
])

const handleTabsEdit = (
  targetName: TabPaneName | undefined,
  action: 'remove' | 'add'
) => {
  if (action === 'add') {
    const newTabName = `${++tabIndex}`
    editableTabs.value.push({
      title: 'New Tab',
      name: newTabName,
      content: 'New Tab content',
    })
    editableTabsValue.value = newTabName
  } else if (action === 'remove') {
    const tabs = editableTabs.value
    let activeName = editableTabsValue.value
    if (activeName === targetName) {
      tabs.forEach((tab, index) => {
        if (tab.name === targetName) {
          const nextTab = tabs[index + 1] || tabs[index - 1]
          if (nextTab) {
            activeName = nextTab.name
          }
        }
      })
    }

    editableTabsValue.value = activeName
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
  }
}

const addTab = (targetName: string) => {
  const newTabName = `${++tabIndex}`
  editableTabs.value.push({
    title: 'New Tab',
    name: newTabName,
    content: 'New Tab content',
  })
  editableTabsValue.value = newTabName
}
const removeTab = (targetName: string) => {
  const tabs = editableTabs.value
  let activeName = editableTabsValue.value
  if (activeName === targetName) {
    tabs.forEach((tab, index) => {
      if (tab.name === targetName) {
        const nextTab = tabs[index + 1] || tabs[index - 1]
        if (nextTab) {
          activeName = nextTab.name
        }
      }
    })
  }

  editableTabsValue.value = activeName
  editableTabs.value = tabs.filter((tab) => tab.name !== targetName)
}

/*
  

  
  let websocket = null;

  onMounted(async () => {
    initTestWebSocket();
  });

  onBeforeMount(async()=>{
    websocket && websocket.close();
  });

  const initTestWebSocket = async () => {
    const userId = '当前用户ID';
    console.log("尝试建立websockect连接");
    websocket = new WebSocket(`/ws/test/${userId}`);
    websocket.onopen = function (event) {
      console.log("建立连接");
    }
    websocket.onclose = function (event) {
      console.log('连接关闭')
      //尝试重连websocket
      reconnectMessageWebSocket();
    }
    //建立通信后，监听到后端的数据传递
    websocket.onmessage = function (event) {
      // 打印后端传来的数据
      console.log(event.data);
      // 调用WebSocket对象的send方法可向后端发送数据
      // websocket.send("test data");
    }
    websocket.onerror = function () {
      console.log("数据发送失败");
    }
    // 窗口关闭前关闭WebSocket连接
    window.onbeforeunload = function () {
      websocket.close();
    }
  };

  // 重连
  const reconnectMessageWebSocket = () => {
    console.log("正在重连");
    // 进行重连
    setTimeout(() => {
      initTestWebSocket();
    }, 1000);
  }
    */
</script>
<style scoped>


.demo-tabs > .el-tabs__content {
  padding: 32px;
  color:blueviolet;
  font-size: 32px;
  font-weight: 600;
}

.el-tabs--left .el-tabs__content {
  height: 500px;
  width: 100%;
}
.demo-tabs{
   /* padding-bottom: 40px;*/
    height: auto;
    margin: 0;
    padding: 0;
}
.stable{
    margin: 0;
    width: 100%;

}
.content{
  
    min-height: calc(100vh - 230px);
   /*   max-height: calc(100% - 100px);
    */
    padding: 0;
    margin: 0;
}
.sharedcontent{
    padding: 0;
    margin: 0;
}

    
</style>